diary - 2018_03
diary - 2018_04
diary - 2018_05
diary - 2018_06
diary - 2018_07
diary - 2018_08
diary - 2018_09
diary - 2018_10
diary - 2018_11
diary - 2018_12
diary - 2019_01
diary - 2019_02
diary - 2019_03
diary - 2019_04
diary - 2019_05
diary - 2019_06
diary - 2019_08
diary - 2019_09
diary - 2019_10
diary - 2019_11
diary - 2019_12
diary - 2020_01
diary - 2020_03
diary - 2020_04
diary - 2020_05
diary - 2020_06
diary - 2020_07
diary - 2020_08
diary - 2020_09
diary - 2020_10
diary - 2021_01
diary - 2021_04
現在表示中
diary - 2021_04
現在表示中
プ ログラミングやRPG（作るほう）が好きな人の日記
|
このウェブページは毎日 夜11時にアクセスできなくなります。 朝6時半に再開されます。（世の中のネット依存対策として） 例外でアクセスができる場合があります。上のメニューの 「aboutThisWebsite」を参照してください。 URL は https でもアクセスできます。 黒猫画像はクリック（タッチ）すると消えます。 NO PC WEEK とは私自身の健康のために私のパソコンの使用を制限する期間です。 |
以下の表は、このウェブページの管理人のパソコンの使用時間を管理・制限するためのものです。
| No. | A1. 1問 |
A2. 運動 |
B. PC使用 開始時刻 |
C. 予定使用時間 時間:分 （当日限度時間 時間:分） |
D. 予定終了時刻 |
E. 実際終了時刻 |
F.
実際使用時間 時間:分 （当日限度時間 時間:分） オーバー理由 |
G. 判定 |
H. 作業内容346 |
|---|---|---|---|---|---|---|---|---|---|
| 記録しなかった長時間作業あり 4コマ漫画の模写の原作側の著作権について考察や追加記事など作成。 |
|||||||||
| 記録しなかった長時間作業あり 自作ツールの文字コード関連の不具合修正と、その記事作成。 |
|||||||||
| 364 | ◎ | ◎ | 20:35 | 2:00（4:00） | 22:35 | 23:00 | 2:25（4:00） | △ | 3Dお姉さんによるプログラム説明 |
| 363 | ◎ | ◎ | 16:00 | 2:00（4:00） | 18:00 | 18:07 | 2:07（4:00） | ◎ | 3Dお姉さんによるプログラム説明 |
| 362 | × | × | 21:55 | 1:30（1:30） | 23:25 | 23:49 | 1:54（1:30） | △ | グリフォンモデリング |
| 361 | ◎ | ◎ | 22:00 | 1:30（1:30） | 23:30 | 23:49 | 1:49（1:30） | ○ | 3Dお姉さんによるプログラム説明 |
| 360 | × | × | 15:00 | 2:00（2:00） | 17:00 | 2:00 | 2:00（2:00） （後日記入した、だいたいこんな感じの記録だった） |
◎ | 3Dお姉さんによるプログラム説明 |
| 359 | ◎ | ◎ | 22:50 | 1:00（2:00） | 23:50 | 2:20 | 3:30（2:00） アドレスバー関連のバグが絶えない… |
× | 3Dお姉さんによる プログラム説明 |
| 358 | ◎ | ◎ | 19:25 | 1:00（2:00） | 20:25 | 21:06 | 1:41（2:00） 目的の完了まで時間がかかった |
× | 3Dお姉さんによるプログラム説明 |
| 記録
しなかった長時間作業あり Windowsの画面端にマウスが来たときに何かをするしくみをセットアップしていた |
|||||||||
| 記録しなかった長時間作業あり Windowsのサウンド関係の不調対応。3Dお姉さんによるプログラム説明。RPG開発についてのメモの整頓。 |
|||||||||
| 357 | × | × | 19:00 | 未設定（3:00） | 未設定 | 3:00 | 8:00（3:00） その後、バグに気が付いて直していた |
× | 3Dお姉さんによるプログラム説明 |
| 356 | ◎ | ◎ | 14:10 | 3:00（3:00） | 17:10 | 18:13 | 4:03（3:00） 今日も、キリが悪かった… （でもこの時刻で終わりにできるのはとてもいいことです） |
× | 3Dお姉さんによるプログラム説明 |
| 355 | ◎ | ◎ | 22:35 | 1:00（3:00） | 23:35 | 0:05 | 1:30（3:00） キリが悪かった… |
× | 3Dお姉さんによるプログラム説明 |
| 354 | ◎ | ◎ | 17:55 | 2:00（3:00） | 19:55 | 20:19 | 2:24（3:00） | △ | 3Dお姉さんによるプログラム説明 |
| 353 | ◎ | × | 15:15 | 1:00（1:00） | 16:15 | 16:20 | 1:05（1:00） | ◎ | 3Dお姉さんによるプログラム説明 |
| 352 | ◎ | ◎ | 18:00 | 1:00（2:00） | 19:00 | 7:00 | 12:00（2:00） 「～動揺せずに、続けます」と思ったらこれだ… 他のプログラムと少しおもむきが違い、切り上げづらいと感じている。おもむきの違いとは、 ・遊ぶためのものではなく、教育的な目的がある。 ・将来に完成を待つタイプのものではなく、すぐに使いたいもの。 |
× | 3Dお姉さんによるプログラム説明 |
| 351 | ◎ | ◎ | 14:40 | 1:30（4:00） | 16:10 | 21:00 | 6:20（4:00） 最近×が多いですが、表の効果は確かなので動揺せずに、続けます。 |
× | 3Dお姉さんによるプログラム説明 |
| 記録
しなかった長時間作業あり 2時間ほど vbscript を使って、演奏中の iTunes の曲に評価をする機能を作成していた |
|||||||||
| 350 | ◎ | ◎ | 21:20 | 1:30（4:00） | 22:50 | 23:23 | 2:03（4:00） 調子よかったため |
× | 3Dお姉さんによるプログラム説明 |
| 349 | ◎ | ◎ | 18:30 | 1:00（4:00） | 19:30 | 19:52 | 1:52（4:00） | △ | 3Dお姉さんによるプログラム説明 |
| 348 | ◎ | ◎ | 16:30 | 1:30（4:00） | 18:00 | 18:01 | 1:30（4:00） | ◎ | 3Dお姉さんによるプログラム説明 |
| 347 | ◎ | ◎ | 22:00 | 1:30（1:30） | 23:30 | 0:26 | 2:26（1:30） キリが悪かった |
× | 3Dお姉さんによるプログラム説明 |
この表の意図：
多くの人はパソコンのやりすぎやネットゲームのやりすぎには困っていると思います。
参考に言うと、この表を使う前の私は 1 回の PC 使用時間がノンストップで 17 時間というときもあったし、平均で言うと毎日 9 時間はやっていたと思います。
数年前から考えてきましたが、そういう徹夜とか長時間作業をするよりも、昼間の短時間 作業のほうが生産性は高いのではないかと思います。
この表を使ってパソコンの使用時間を 事前に決めて、ネット上に 公開 することで、パソコンのやりすぎを防止できたら、と思います。
以前は NO PC WEEK
と称してパソコンを使用しない期間を設けることでやりすぎに対処してきましたが、もっと具合の良い方法はないかと考え、この表を使うようになりました。
記入の法則：
例外事項：
廃止事項：
以下の事項は実施できないので廃止する。
中途結果：
結構いい結果になっています。 炊事や掃除、散歩、早起きなどが好ましいリズムでできるようになりました。
（2020年9月6日追記：散歩、早起きは最近あまりできていません。掃除や炊事は理 想的にできています）
また、パ ソコン以外の趣味も進むようになりました。電子回路、ガンプラ、RPG のプログラム以外のモンスターイラストやストーリーなど RPG の肉付け部分の創作、勉強、昔好きだったペーパークラフト等々。
そしてパ ソコンの趣味自体も深夜遅くまで行うよりも質が高くなったように感じます。制限された短い時間の中で結果を得ようとするので、取捨選択が 行われているし、時間が終了して、空いた時間ができ、それがほどよい休憩になり、今後の作業の方針を落ち着いて検討することもできます。 それが質につながっているのかなと思います。
この取り組みが、15 才 ～ 18 才くらいまでの高専（中退）に所属していた時に実施できていたら良かっただろうなと思います。でもそれくらいの年齢では経験が浅く、このような効果的なルール作りを行うこ とはできなかったと思います。自分は人に比べて「創作意欲」や「ゲームで遊ぶ欲望」におぼれやすいところがあり、そのコントロールはとても難しい です。
ちなみに、分単位で記録を取ったりして、だいぶマメに見えるかもしれませんが、 Windows の日本語入力（MS-IME）で「いま」と入力し、 変換 キーを押さずに ↑ ボタンを押すと現在の時刻になります。道具の便利さが人をマメに見せるのかもしれません。
自分の家族にすすめたい方へ：
パソコンのやりすぎやネットゲームのやりすぎは社会問題にもなっているので、そう思う ご家族の方は多くいらっしゃると思います。
私の両親も過去に私について問題にしていました。学校へ行かず、毎日朝までパソコンに 向かい、悶々としていたんです。
この表はその家族が困っていたときから 30 年後に、私が自分で必要を感じて作ったものです。
私は今 一人暮らしをしていて、自分で生計を立てる中、パソコンにおぼれた生活をすると、生活がうまく回らなくなるんです。
具体的には、
これらを改善するために表を作りました。
でも、このような必要にせまられて「自分の動機で始めた場合」と、「人からすすめられ て始めた場合」とでは、結果が異なると思います。
自分の切実な動機で始めたなら自分から進んでこの表を活用すると思いますが、外から押 し付けられたものはなかなか定着しないものです。
あまり適当なことは言えませんが、上 記の青い部分で書いたことは、本人にとって得になることなので、「ときどき休憩して、他のあの趣味やってみたらどうだ？」とか 「ときどき休憩したほうがプログラミングの質が上がるって話だぞ？」という形ですすめてみたらどうでしょうか。（それでも最終的には自立してもら うことは必要だと思いますが）
私が両親を困らせていたときに、突然、外へ一人で出て行って、一人暮らしを始めたり、 接客業を始めたり、いくつか資格取得したりといろいろ行えた理由というのは、正直言ってわかりません。（※しかし途中で失業して2度、実家に戻っ たことがあります。1 回目は 21 才くらいのときに 5 年間、2 回目は 35 才くらいのときに1年未満、実家にいて、何もしてなかったり働いたりしていました）
私が両親を困らせていたのは 16 才 ~ 20 才くらいの学生のころですが、そのころ家族と私自身と友人たちがみんなそれぞれ、私の生活について心配したり困ったり悩んだり、あの手この手を試したりしていました。そう いう煮詰まったような状況が運命をそのように（解決の方向へ）動かすのかもしれません。運命がどうの というのは変ですが、そのくらいのことしか言えません。何かしら取り組む必要があるということですかね。
この社会問題はクリアーすべきものみたいです。
以下は私のための覚え書きです。（装飾はふせん紙のつもりです）
以下の表は、今月の私の関心事の記録です。
| 記入日付 | ジャンル | 現在 | タイトル、評価、感想 |
|---|---|---|---|
| 4月2日 (金) | アニメ | 観ている最中 | 「ドラゴンボール超」（リンクは第97話）GYAO!にて無料放送中 ジャンプ漫画アニメ化作品／0:23:20 ×131話／2015年／公評価：★★★☆☆、私評価：★★★☆☆ ＊＊ 感想 ＊＊ 全王様の「力の大会」が始まって、戦い始めたところです。 ストーリーは鳥山明が大部分考えているので、おもしろいです。 「ジョジョ」の仗助編が終わってしまって、他に観るものがこの「超」と超じゃない「ドラゴンボール」しかない… |
以降は今月の日記（このウェブページのメイン）です。上ほど新しい日記です。
2021/4/19（月）～ 2021/5/9（日）当日いっぱいまで
今日、
いつも使っている自作のツールが突然エラーを出しました。
どうも調べてみると、「文字コード」の問題のようでした。
いつも問題なく使えていたのに、突然エラーを出すなんて、どういうことなのか―――
急遽 対処に追われました。
♪Perl で、スクリプトファイルの文字コードを「SJIS」にして保存した状態で、
diary - 2021_05
diary - 2021_06
diary - 2021_07
diary - 2021_08
diary - 2021_10
diary - 2022_04
diary - 2022_05
diary - 2022_06
diary - 2023_06
diary - 2999_01
最新月
$s = "スリープ中です";
if( $s =~ m/スリープ/ ) {
print "found.";
} else {
print "not found";
}
このような、文字列 $s の中から検索文字列「スリープ」を見つけるコード（正規表現を利用）を書いて実行してみると、
下図のようにエラーになります。今回出した突然のエラーがこれです。
（※このエラーの意味（翻訳）は、”検索ワード（RegEx）内において、[ に対応する括弧がない” かな？）
おかしいな、と思っていろいろ文字列を替えて試しました。次のコードのように「スリープ」を「スリプ」にして…
$s = "スリプ中です";
if( $s =~ m/スリプ/ ) {
print "found.";
} else {
print "not found";
}
実行してみると、↓
エラーは起きません。
犯人は「－」（ハイフン）だ！と思って、
「正規表現 sjis ハイフン」で検索（リンクは Bing 検索）したところ、解説してくれているサイト（下記リンク）が見つかりました。
…以前から『SJIS の文字列には「特定の処理系で使う制御文字」が含まれることがある』というのは何となく知っていたんですが、気づいて解決するまでに時間がかかってしまいました。
特定の処理系とは、ここでは「正規表現」のことです。いろいろな制御文字でキーワードを表現して、文字列から特定の文字列を探し出すものです。
正規表現が、SJIS の「－」に含まれる制御文字を「－」ではなく制御文字として見てしまうので、エラーになってしまいます。
今まで「－」を含む文字列を自作ツールで使ってこなかったので、今回突然「－」を使ってエラーに遭遇した―――というわけでした。
で、解決方法は、「SJIS 特有の問題なので、別の文字コードに直せばエラーは出なくなる」ということでした。
ファイル自体の文字コードを SJIS から UTF8 に直したところ エラーは出なくなりましたが、（こ れを※Aとして のちに参照）
私の今回の問題では ファイル自体の文字コードを変更したくなかった ので、下記のような対処になりました。
use Encode;
$s = "スリープ中です"; #ファイル自体がSJISなので、この文字列はSJIS。
$r = "スリープ";
Encode::from_to( $s, "sjis", "utf8" );
#SJISからUTF8へ変換する
Encode::from_to( $r, "sjis", "utf8" );
if( $s =~ m/$r/ ) { #検索対象も、検索ワードもどちらもUTF8なので、
#SJISの「－」に含まれる制御文字が機能することはない
print "found.";
} else {
print "not found";
}
実行すると、正しく見つけてくれます↓
これで解決に至りました。
現在自作ツールは「ー」があっても問題なく使用できています。
めでたし、めでたし
…でも、こうなってくると、プログラミングの初心者の人には文字コードの問題は 太刀打ちできないんじゃないかと、ちょっと思いました。
文字コードって何なのか理解しづらいし、その対応も上記のように難しいです。
今回のこの文字コードの問題は、「正規表現を使用」なおかつ「SJISを使用」の場合の問題なので、「正規表現」か「SJIS」のどちらかを使わないよ うにすれば問題は起きません。
「正規表現の中で SJIS の文字が問題を起こす」ということなので、正規表現を使わないなら制御文字の問題はないので そもそも問題は起きませんし、 SJIS を使わないなら、正規表現の中で意図しない制御文字の出現も起きません。
| 2
次創作 特別読切 4コマ漫画 「初心者 ガンダム」 |
 |
 |
 |
 |
| 字幕 | 機動戦士 初心者ガンダムだ！ |
やだー！カッコワルーイ！ ダサーイ！ 連邦軍もこれでおしまいね。 |
いやいやいや！ だいじょーぶ、だいじょーぶ |
カレも初心者ァ～・アズナブルだから！ オレ、初心者ァ |
| おてがみ |
この４コマ漫画は冗談です。初心者の車の運転事故を防ぐためには、所定の期間のあいだ 初心者マークは必ず必要です。 ※上記の4コマ漫画の1コマ目（左端）は原作（の最近のメディア展開の１カッ
ト）を模写して 少しいじったものです。（ファンアート） ※絵の模写の公開については、こちらのサイトの記事を参考にさせていただきました。それでもグレーゾーンな感じがして難 しいなと思いました。 |
たとえば、下のプログラムは、ファイルは SJIS で保存していますが、正規表現を使わないでサブルーチン index を使って同じことをしています。
$s = "スリープ中です"; #ファイル自体がSJISなので、この文字列はSJIS。
if( index( $s, "スリープ" ) > -1 ) {
#index関数はSJISでもUTF8でも正しく動作する。
print "found.";
} else {
print "not found";
}
その実行結果です↓
なお、index を使わないで正規表現を使いたがる理由は、正規表現の万能度が高いからです。
また、「正規表現」を使用して、ファイル自体に文字コード「SJIS」を使わない場合は、上述※Aの時点で試しました。動作します。
なお、ファイル自体が UTF8 でも、どこからか読み込んだ文字列が SJIS で、その SJIS の文字列を正規表現にかけると同じ問題が発生します。
それから、プログラム中の文字列を見て、それがどんな文字コードなのかはすぐにわからないので、プログラミングがけっこう困難ですよね。
「この文字列変数の文字コードってなんだっけ？」的な。
私は Perl で文字コードが問題になるときは、日ごろからこのようにプログラムしています。
文字列変数の変数名の末尾に「UTF8」とか「SJIS」などと付与することで、その文字列が何なのかすぐにわかるようにしています。
混乱せずにプログラミングできるのでオススメです。
また、その他の工夫として、Perl の Encode モジュールの文字コード変換サブルーチン、
from_to( 対象文字列, 変換前文字コード名, 変換後文字コード名 )
…は記述が面倒だと思って、
u2s( 文字列 )、s2u( 文字列 ) というようなサブルーチンを自分で用意しています。
sub s2u {
local( $str ) = shift;
Encode::from_to( $str, "Shift_JIS", "UTF-8" ) ;
return $str;
}
sub u2s {
local( $str ) = shift;
Encode::from_to( $str, "UTF-8", "UTF-8" )
; #utf8フラグ除去
Encode::from_to( $str, "UTF-8", "Shift_JIS" ) ;
return $str;
}
…今このサブルーチンを貼り付けしていて気づきましたが、
そういや、UTF8 は「UTF8 フラグ除去」なんて対処が必要になる場面もあったんでした。
とにかく日本語の文字コードは問題だらけで困りますね！
時間がないので、簡単に。
動物の、頭、首、胴体を何も考えないで「ボーン」でつなげると、「首を横に回す」＋「かしげる」という動かし方をしたときに、おかしな方向にかしげてし まいます。
▼首の中のボーンがななめで、頭のボーンもななめなので、首を横に回してかしげると、おかしな方向に頭が傾く。
（手塚治虫風に言うと、「あさっての方向を向いている」）
▼水平に回すためのボーン「くび＿まわし」と、かしげるためのボーン「くび＿かしげ」を用意する。
※「バインド」とは「その部位を、どのボーンに追従させて動かすのか」という設定のことです。
バインドさせると、ボーンを動かしたとき、その部位が一緒に動きます。
つまりガンダムのプラモデルみたいにポーズを取らせることができるようになります。
▼実際に作成したボーン
▼首を水平に回しつつ、かしげられるようになりました。鳥ってどうしてこうやってかしげるのだろう…「？」なのかな？
▼「鷲（わし）」の画像検索結果のかしげ写真（著作権が気になってモザイクをかけました）
どう見ても「ん？」って感じ。
現在作成中の、「3Dお姉さんのプログラム説明」のプログラム（こ のリンクをクリックするとダダダーっと開始しますのでご注意ください）で、スマートホンのブラウザのスクロール時に意図しないリサイズが起こり困っていま した。
「3Dお姉さんの…」は不特定多数の方が利用することを想定したプログラムであって、すでに掲載しているので、早めに直さなければ…と思いました。
それでいろいろインターネットを調べました。
同じ問題で困っているという話は、地味にあるみたいです。
…というわけで、どちらの方々も、これといった解決策がなくて困っている様子でしたが、いくつか有効な情報を教えてもらい、良かったです。ありがとうご ざいます。
（昔飼ってた猫は寝起きとかでよくやってました）
私もけっこう悩みましたが、落ち着いたプログラムはこれです。
スマートホンの問題なので、この JavaScript の動きはスマートホンでしか確認できません。
JavaScript を別ウィンドウで開く（snapshot。現時点で固定したファイル、公向け）
JavaScript を別ウィンドウで開く（開発に合わせて変更されるファイル、私向け）
（プログラムリストは右クリックで「ソースコードを表示」等を選んください）
完ぺきではありませんが、そこそこ良いかなと思っているところです。
でもスマートホンの機種によってはうまく動かないかもしれません。
（訪問者のどんなニーズと この記事がつながるか）
SFアドベンチャー／2020年オーストラリア／1:54／公評価：★★★☆☆、私評価：★★★☆☆
楽天TVに投稿した私のレビュー：
「おもしろかった、そこそこ」
スーパーアクションやトリッキーな映像表現による興奮はあまりありません。
厳しい暴力や性表現、グロテスクな表現はないので安心して観られると思います。
人間ドラマを楽しめる人向けで、個人的には贈り物として届いた缶詰の中身が良かったかな。
ここでの追加レビュー：
少し、甘いストーリーかな？（甘いというか ぬるい というか）という気はちょっとしました。
楽天以外の人々の評価で、★2.7だったり低評価になっています。
楽天ポイントカードを毎日の買い物で提示していたら、ちょっとした小遣い程度にポイントが貯 まっていて（600円分程度）、使わないと失効すると思い、映画鑑賞代に あてました。
ホラー／2008年日本／1:46:27／公評価：★★☆☆☆、私評価：★★★★☆
Yahoo! GYAOにて無料配信あと6日2021年4月14日(水) 23:59まで
Yahoo! GYAO に投稿した私のレビュー：
「おもしろかった」
今回含めて2回見ました。
2回とも満足できました。
原作を知っている方は気持ちを切り替えて評価することはできないはずだと思いますが、私のよう に原作を知らない人は高い評価を出すことができる作品です。
どの登場人物も悪に染まっているわけではなく、 お社様に翻弄（ほんろう）されているという位置づけなのが、物語を引き立てていたように思います。
2回見て2回とも満足すると同じ役者さんが活躍しているのを見たくなってしまいます。
ここでの追加レビュー：
ホントは3回見てるかな？
主人公が女子生徒たちに疑念を抱いて、体調が悪いと言って下校するときの場面で、女子生徒の 「嘘だ！！」と叫ぶ場面が、効果的で好きなんだよなぁ。
他に、
…を観てました。
（訪問者のどんなニーズと この記事がつながるか）
2020年分の10月スクリプト（トップページの冒頭に飾るスクリプト）の完成を待っているからです。
▼メニューにブランクアイコンが並んでいる…
（訪問者のどんなニーズと この記事がつながるか）
ウェブページに掲載するプログラムの説明を、訪問者の皆さんがもっと楽しく読めるように、キャラクターにしゃべらせる（皆さんがキャラのセリフを読む） ようにしてみました。
プログラミングの初心者の方向けの内容となっており、ゲーム感覚でプログラムの説明を読むことができます。
下の緑色のボタンをクリックすると、開始します。（約 
分）
進めるにはセリフ部分をクリック（タップ）するか、キーボードのスペースキーを押してく ださい。
途中でやめるには、顔をダブルクリックするか、顔とフキダシ部分を2本の指でタッチしま す。
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script src="a.js"></script>
<script>
function onloadx() {
app = new App( "test_canvas" );
app.start();
}
</script>
</head>
<body onload="onloadx()">
<canvas id="test_canvas" width="512" height="448" style="
border : solid 1px black;
">
There is no canvas.
</canvas>
</body>
</html>
class App {
constructor( canvasId ) {
this.cc = document.getElementById( canvasId ).getContext( "2d", { alpha: false } );
this.cc.tmp = {
width : this.cc.canvas.width,
height : this.cc.canvas.height,
}
this.balls = new Array();
for( let color of [ "rgb(255,0,0)",
"rgb(0,255,0)",
"rgb(0,0,255)",
"rgb(255,0,255)",
"rgb(0,255,255)",
"rgb(255,255,0)",
] ) {
let ball = new Ball( color, this.cc );
ball.addX = 5 + Math.random() * 10;
ball.addY = 5 + Math.random() * 10;
ball.x = Math.random() * this.cc.tmp.width;
ball.y = Math.random() * this.cc.tmp.height;
this.balls.push( ball );
}
}
start() {
if( typeof this.timerId === "undefined" )
this.timerId = setInterval( this.frame.bind( this ), 100 );
}
stop() {
if( typeof this.timerId !== "undefined" ) {
clearInterval( this.timerId );
delete this.timerId;
}
}
frame() {
for( let ball of this.balls ) {
ball.frame();
}
this.draw( this.cc );
}
draw( cc ) {
cc.fillStyle = "white";
cc.fillRect( 0, 0, cc.tmp.width, cc.tmp.height );
for( let ball of this.balls ) {
ball.draw( cc );
}
}
}
class Ball {
constructor( color, cc ) {
this.color = color;
this.cc = cc;
this.x = 0;
this.y = 0;
this.addX = 1;
this.addY = 1;
}
frame() {
this.x += this.addX * 1.25;
this.y += this.addY * 1.25;
//check.
if( this.x > this.cc.tmp.width ) {
this.addX *= -1;
}
if( this.x < 0 ) {
this.addX *= -1;
}
if( this.y > this.cc.tmp.height ) {
this.addY *= -1;
}
if( this.y < 0 ) {
this.addY *= -1;
}
}
draw( cc ) {
cc.beginPath();
cc.arc( this.x, this.y, 75, 0, 6.28, false );
cc.closePath();
cc.globalAlpha = 0.5;
cc.fillStyle = this.color;
cc.fill();
// cc.globalAlpha = 1; //この行コメントアウトで残像
}
}
（訪問者のどんなニーズと この記事がつながるか）